<template>

    <el-form :inline="true" :model="Data" class="demo-form-inline">
        <el-form-item label="字典类型名称">
            <el-input v-model="Data.name" placeholder="" clearable />
        </el-form-item>
        <el-form-item label="备注说明">
            <el-input v-model="Data.desc" placeholder="" clearable />
        </el-form-item>

        <el-form-item>
            <el-button type="primary" @click="Show">查询</el-button>
        </el-form-item>
    </el-form>

    <el-table :data="tableData" border style="width: 100%">
        <el-table-column prop="dt_Name" label="字典类型名称" width="180" />
        <el-table-column prop="dt_Desc" label="备注说明" width="180" />
        <el-table-column type="index" label="排序" />
        <el-table-column prop="createName" label="编辑者" />
        <el-table-column prop="time" label="编辑时间">
            <template v-slot="scoped">
                {{ scoped.row.time.substring(0, 10) }}
            </template>
        </el-table-column>
    </el-table>

    <div class="demo-pagination-block">
        <el-pagination v-model:current-page="Data.pageIndex" v-model:page-size="Data.pageSize"
            :page-sizes="[2, 3, 4, 5]" :background="true" layout="total, sizes, prev, pager, next, jumper"
            :total="Data.count" prev-text="上一页" next-text="下一页" />
    </div>
</template>

<script lang="ts" setup>
import axios from 'axios'
import { onMounted, ref, watch } from 'vue'

const tableData = ref([])
const Data = ref({
    pageIndex: 1,
    pageSize: 2,
    name: '',
    desc: '',
    count: 0
})

const Show = () => {
    axios.get("http://localhost:5097/api/Management/GetType", {
        params: {
            pageIndex: Data.value.pageIndex,
            pageSize: Data.value.pageSize,
            name: Data.value.name,
            desc: Data.value.desc
        }
    })
        .then(res => {
            tableData.value = res.data.pageData;
            Data.value.count = res.data.totalCount;

        })
}

watch(() => (Data.value.pageIndex, Data.value.pageSize), () => {
    Show();
}, { deep: true })


onMounted(() => {
    Show();
})
</script>